<template>
	<view class="container">
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">维修记录详情</block>
		</cu-custom>

		<view class="bg-top bg-blue">
			<view class="top-box shadow">
				<view class="cu-list menu">
					<view class="cu-item" style="padding: 0;">
						<view class="content" style="display: flex; justify-content: space-around;">
							<text class="text-black text-bold"
								style="min-width: 200rpx; max-width: 200rpx; text-align: left;">状态:</text>
							<text :class="repairEntity.UpkeepType==1?'bg-blue':repairEntity.UpkeepType==2?'bg-orange':'bg-red'" class="cu-tag margin-right-xs light radius"
								style="min-width: 380rpx; max-width: 380rpx; text-align: left;">
								{{repairEntity.UpkeepType==1?'计划':repairEntity.UpkeepType==2?'故障':'大修'}}
							</text>
						</view>
					</view>
					
					<view class="cu-item" style="padding: 0;">
						<view class="content" style="display: flex; justify-content: space-around;">
							<text class="text-black text-bold"
								style="min-width: 200rpx; max-width: 200rpx; text-align: left;">发生时间:</text>
							<text class="text-black"
								style="min-width: 380rpx; max-width: 380rpx; text-align: left;">{{repairEntity.HappenDate}}</text>
						</view>
					</view>
					
					<view class="cu-item" style="padding: 0;">
						<view class="content" style="display: flex; justify-content: space-around;">
							<text class="text-black text-bold"
								style="min-width: 200rpx; max-width: 200rpx; text-align: left;">技术负责人:</text>
							<text class="text-black"
								style="min-width: 380rpx; max-width: 380rpx; text-align: left;">{{repairEntity.TechnicalDirector}}</text>
						</view>
					</view>

				<view class="menu">
					<view class="cu-bar bg-white margin-top-xs u-border-bottom">
						<view class="action sub-title">
							<text class="text-xl text-bold text-blue text-shadow">维修内容</text>
							<text class="text-ABC text-blue">Contents</text>
						</view>
					</view>
					<view class="padding text-grey">{{repairEntity.RepairContent}}</view>
				</view>
				<view class="cu-item" style="padding: 0;">
					<view class="content" style="display: flex; justify-content: space-around;">
						<text class="text-black text-bold"
							style="min-width: 200rpx; max-width: 200rpx; text-align: left;">完成时间:</text>
						<text class="text-black"
							style="min-width: 380rpx; max-width: 380rpx; text-align: left;">{{repairEntity.CompleteTime}}</text>
					</view>
				</view>
				<view class="cu-item" style="padding: 0;">
					<view class="content" style="display: flex; justify-content: space-around;">
						<text class="text-black text-bold"
							style="min-width: 200rpx; max-width: 200rpx; text-align: left;">停机时间:</text>
						<text class="text-black"
							style="min-width: 380rpx; max-width: 380rpx; text-align: left;">{{repairEntity.PullUpTime}}</text>
					</view>
				</view>
				
				
				
				<view class="cu-item" style="padding: 0;">
					<view class="content" style="display: flex; justify-content: space-around;">
						<text class="text-black text-bold"
							style="min-width: 200rpx; max-width: 200rpx; text-align: left;">主修人:</text>
						<text class="text-black"
							style="min-width: 380rpx; max-width: 380rpx; text-align: left;">{{repairEntity.MajorWorker}}</text>
					</view>
				</view>
				<view class="menu">
					<view class="cu-bar bg-white margin-top-xs u-border-bottom">
						<view class="action sub-title">
							<text class="text-xl text-bold text-blue text-shadow">处理内容</text>
							<text class="text-ABC text-blue">Contents</text>
						</view>
					</view>
					<view class="padding text-grey">{{repairEntity.CauseAndImprove}}</view>
				</view>
				</view>
			</view>
			
			<view class="buttoncontent">
				<view class="subform" style="margin-bottom: 50rpx;margin-top: 30rpx" @click="back">返 回</view>
			</view>
		</view>
	</view>
</template>
<script>
	import request from '@/common/request.js';
	export default {
		data(){
			return{
				repairId:'',
				repairEntity:{
					RepairContent:'',  //维修内容
					CauseAndImprove:'',//原因
					HappenDate:'',   //发生日期
					PullUpTime:'',   //发生时间
					UpkeepDate:'',   //维修日期
					CompleteTime:'',   //维修时间
					UpkeepType:'',   //维修类型
					MajorWorker:'',     //主修人
					TechnicalDirector:'', //技术负责人
					ETStatus:1,
				},
			}
		},
		onLoad(options) {
			var that=this
			that.repairId=options.repairId
			that.getDetail(options.repairId);
		},
		methods:{
			getDetail(repairId){
				let that=this
				let opts = {
					url: 'CofcoApi/GetETRepairRecordByID',
					method: 'get'
				};
				let requestData={
					id:repairId
				}
				uni.showLoading({
					title: '加载中...'
				})
				
				request.httpRequest(opts,requestData).then(res => {
					uni.hideLoading();
					if(res.data.code == 1){
						console.log(res.data.data.Data)
						let entity=res.data.data.Data
						that.repairEntity.RepairContent=entity.RepairContent
						that.repairEntity.CauseAndImprove=entity.CauseAndImprove
						that.repairEntity.HappenDate=entity.HappenDate
						that.repairEntity.UpkeepDate=entity.UpkeepDate
						that.repairEntity.UpkeepType=entity.UpkeepType
						that.repairEntity.MajorWorker=entity.MajorWorker
						that.repairEntity.TechnicalDirector=entity.TechnicalDirector
						that.repairEntity.CompleteTime=entity.CompleteTime
						that.repairEntity.PullUpTime=entity.PullUpTime
					}
					else{
						uni.hideLoading();
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				});
			},
			back(){
				setTimeout(() => {
					 uni.navigateBack({
					 	delta: 1 //返回层数，2则上上页
					 });
				}, 100)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cu-item{
		min-height: 80rpx !important;
	}
	.uni-video{
		width: 100% !important;
	}
	.container {
		width: 750rpx;
		color: #333333;
		.imagesclass{
			width:33%;
			float:left;
			.imagesclassdetail{
				width: 100px !important;
				height: 100px !important;
				margin-right: 20px;
			}
		}
		.bg-top {
			margin-top: -1rpx;
			width: 750rpx;
			height: 220rpx;
			padding-top: 50rpx;
			border-radius: 0 0 20% 20%;

			.top-box {
				width: 700rpx;
				background-color: #FFFFFF;
				margin: 0 auto;
				border-radius: 20rpx;
				padding: 20rpx 30rpx 0rpx;
				position: relative;

				.qh-pic {
					position: absolute;
					right: 64rpx;
					top: -50rpx;
					border-radius: 12rpx;
				}

				.qh-title {
					width: 100%;
					height: 60rpx;
					line-height: 65rpx;
					padding-right: 190rpx;
				}

				.bxBox {
					position: relative;
					display: flex;
					/* padding: 0 30rpx; */
					min-height: 100rpx;
					/* background-color: #ffffff; */
					/* justify-content: space-between; */
					align-items: center;
					font-size: 30rpx;
					line-height: 1.6em;
					flex: 1;

					.bxImg {
						display: inline-block;
						margin-right: 10rpx;
						width: 1.6em;
						text-align: center;
					}
				}

			}
		}

		.center-box {
			color: #333333;
			width: 700rpx;
			background-color: #FFFFFF;
			margin: 0 auto;
			border-radius: 20rpx;
			padding: 0rpx 30rpx 0rpx;
			position: relative;
			margin-top: 20rpx;
		}
	}
	.buttoncontent {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  .subform {
		left: 5%;
		bottom: 8%;
		width: 90%;
		text-align: center;
	    padding: 20rpx 60rpx;
	    border-radius: 18rpx;
	    background-color: #0081ff;
		color: white;
	  }
	}
</style>